<template>
  <div class="box">
    <div
      class="table"
      v-for="(item, index) in tableData"
      :key="index"
      v-show="activeindex === index"
    >
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">策略名称</div>
        <div class="getdata">{{ item.pattern_name }}</div>
      </div>
      <div class="text1">
        <div class="header">委托状态</div>
        <div class="getdata" style="color: red">
          {{ item.transaction.status }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">股票名称</div>
        <div class="getdata" style="color: red">
          {{ item.transaction.exchange }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">最新价</div>
        <div class="getdata" style="color: yellow">
          {{ towNumber(item.transaction.open_order.executed_no) }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">证券代码</div>
        <div class="getdata">{{ item.transaction.symbol }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">浮动盈亏(%)</div>
        <div class="getdata">
          {{ towNumber(item.transaction.profit_percent / 1000) + '%' }}
        </div>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">策略周期</div>
        <div class="getdata" style="color: yellow">
          {{ item.period_type }}
        </div>
      </div>
      <div class="text1">
        <div class="header">开仓委托序号</div>
        <div class="getdata" style="color: yellow">
          {{ item.transaction.open_order.order_no }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓委托价格</div>
        <div class="getdata" style="color: yellow">
          {{ item.transaction.open_order.order_price / 1000 }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓委托数量</div>
        <div class="getdata" style="color: yellow">
          {{ item.transaction.open_order.order_volume }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓委托时间</div>
        <div class="getdata">
          {{ (item.transaction.open_order.order_time * 1000) | dateFormat }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">开仓成交价格</div>
        <div class="getdata">
          {{ item.transaction.open_order.executed_price / 1000 }}
        </div>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">开仓成交数量</div>
        <div class="getdata">
          {{ item.transaction.open_order.executed_volume }}
        </div>
      </div>
      <div class="text1">
        <div class="header">开仓成交时间</div>
        <div class="getdata">
          {{ (item.transaction.open_order.executed_time * 1000) | dateFormat }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">序号</div>
        <div class="getdata">{{ item.transaction.trans_no }}</div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓委托价格</div>
        <div class="getdata">
          {{ item.transaction.close_order.order_price / 1000 }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓委托数量</div>
        <div class="getdata" style="color: yellow">
          {{ item.transaction.close_order.order_volume }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓委托时间</div>
        <div class="getdata">
          <span v-if="item.transaction.close_order.order_time === '0'">-</span>
          <span v-else>{{
            (item.transaction.close_order.order_time * 1000) | dateFormat
          }}</span>
        </div>
      </div>
      <div class="text1" style="background-color: #1f1e32">
        <div class="header">平仓成交价格</div>
        <div class="getdata">
          {{ item.transaction.close_order.executed_price / 1000 }}
        </div>
      </div>
      <div class="text1">
        <div class="header">平仓成交数量</div>
        <div class="getdata">
          {{ item.transaction.close_order.executed_volume }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">平仓成交时间</div>
        <div class="getdata">
          <span v-if="item.transaction.close_order.executed_time === '0'"
            >-</span
          >
          <span v-else>{{
            (item.transaction.close_order.executed_time * 1000) | dateFormat
          }}</span>
        </div>
      </div>
      <el-divider class="divider"></el-divider>
      <div class="text1">
        <div class="header">平仓方式</div>
        <div class="getdata">{{ item.stop_type }}</div>
      </div>
      <el-divider class="divider"></el-divider>
      <div class="text1">
        <div class="header">目标盈利价</div>
        <div class="getdata" style="color:red">
          {{ towNumber(item.stop_profit_value / 1000) }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="text1">
        <div class="header">目标止损价</div>
        <div class="getdata" style="color:#06e108">
          {{ towNumber(item.stop_loss_value / 1000) }}
        </div>
      </div>
    </div>
    <div>
      <el-button @click="activeIndexReduce" class="previousPage" type="primary"
        >上一页</el-button
      >
      <el-button @click="activeIndexAdd" class="nextPage" type="primary"
        >下一页</el-button
      >
    </div>
  </div>
</template>
<script>
import { websocket } from '../assets/js/websocketHQ.js'
export default {
  data() {
    return {
      activeindex: this.$store.state.Activeindex
    }
  },
  computed: {
    tableData() {
      return this.$store.state.data1
    },
    tableData1() {
      return this.$store.state.data2
    }
  },
  methods: {
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    },
    activeIndexAdd() {
      this.activeindex = this.activeindex + 1
      if (this.activeindex > this.$store.state.data1.length - 1) {
        this.activeindex = this.$store.state.data1.length - 1
      }
    },
    activeIndexReduce() {
      this.activeindex = this.activeindex - 1
      if (this.activeindex < 0) {
        this.activeindex = 0
      }
    },
    getHQ1() {
      websocket()
    },
    SUBsrcibe() {
      this.$store.state.arrexchange = []
      for (let i = 0; i < this.$store.state.data1.length; i++) {
        if (this.$store.state.data1[i].transaction.exchange === '深圳') {
          this.$store.state.arrexchange.push(
            '23123' + this.$store.state.data1[i].transaction.symbol
          )
        } else if (this.$store.state.data1[i].transaction.exchange === '上海') {
          this.$store.state.arrexchange.push(
            '18515' + this.$store.state.data1[i].transaction.symbol
          )
        }
      }
      // console.log(this.$store.state.arrexchange.join(','))
    },
    throttle(func, wait) {
      let previous = 0
      return function() {
        const now = Date.now()
        const context = this
        const args = arguments
        if (now - previous > wait) {
          func.apply(context, args)
          previous = now
        }
      }
    }
  },
  watch: {
    tableData1: function() {
      var _this = this
      _this.$nextTick(function() {
        this.SUBsrcibe()
        this.throttle(this.getHQ1(), 2000)
      })
    }
  }
}
</script>
<style>
.box {
  display: flex;
  flex-direction: column;
  width: 375px;
  background-color: #0e0c22;
  margin: 0 auto;
}
.table {
  width: 375px;
}
.title {
  color: #00ffff;
  margin: 24px auto 24px auto;
  font-size: 19px;
}
.text1 {
  width: 375px;
  display: flex;
  flex-direction: row;
  font-size: 16px;
  background: #010017;
}
.header {
  text-align: left;
  width: 50%;
  color: #ffffff;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
  font-family: '苹方';
}
.getdata {
  width: 50%;
  text-align: center;
  color: #ffffff;
  margin-top: 10px;
  margin-right: 8.533328px;
  font-family: '苹方';
}
.el-divider--horizontal {
  margin: 0 !important;
  background-color: #373548;
}
.previousPage {
  width: 80px;
  height: 40px;
  background: #457ffd;
  top: 540px;
  position: fixed;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border-radius: 10px;
}
.nextPage {
  width: 80px;
  height: 40px;
  background: #457ffd;
  top: 540px;
  position: fixed;
  right: 10px;
  display: flex;
  align-items: center;
  color: #ffffff;
  justify-content: center;
  border-radius: 10px;
}
img {
  width: 12px;
  height: 22px;
}
</style>
